<template>
  <view class="ai-float-container" :class="{ 'ai-float-hidden': isHidden }">
    <!-- 悬浮按钮，点击展开/收起聊天框 -->
    <view class="ai-toggle-btn" @click="toggleAI">
      <text class="toggle-icon">{{ isHidden ? '🤖' : '×' }}</text>
    </view>
    
    <!-- 聊天容器 -->
    <view class="ai-chat-container" v-if="!isHidden">
      <view class="ai-chat-header">
        <text class="ai-chat-title">足球规则助手</text>
        <view class="header-actions">
          <text class="header-action" @click="clearMessages">清空</text>
        </view>
      </view>
      
      <scroll-view class="ai-chat-body" scroll-y="true" scroll-with-animation="true" 
                  :scroll-top="scrollTop" @scrolltolower="onScrollToLower"
                  :style="{ height: chatBodyHeight + 'rpx' }">
        <view class="ai-chat-messages">
          <view v-for="(message, index) in messages" :key="index" 
                class="ai-message" :class="message.role">
            <view class="ai-message-content" @longpress="copyMessage(message.content)">
              <text v-if="!isTyping || index !== messages.length - 1 || message.role !== 'assistant'">{{ message.content }}</text>
              <text v-else>{{ typingText }}</text>
              <view v-if="isThinking && index === messages.length - 1 && message.role === 'assistant'" class="thinking-dots">
                <text class="dot dot1">.</text>
                <text class="dot dot2">.</text>
                <text class="dot dot3">.</text>
              </view>
            </view>
            <view class="ai-message-time">{{ formatTime(message.time) }}</view>
          </view>
        </view>
      </scroll-view>
      
      <view class="ai-chat-footer">
        <input class="ai-chat-input" type="text" confirm-type="send"
              v-model="inputMessage" placeholder="请输入您的问题..."
              @confirm="sendMessage" :disabled="!isLoggedIn" />
        <button class="ai-chat-send" @click="sendMessage" :disabled="!isLoggedIn" :class="{'ai-chat-send-disabled': !isLoggedIn}">发送</button>
      </view>
      
      <!-- 未登录状态的一个简单提示横幅，不需要登录按钮 -->
      <view class="login-banner" v-if="!isLoggedIn">
        <text class="login-banner-text">请先登录后再使用AI助手</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getToken } from '@/utils/tokenManager.js';

export default {
  name: 'ai-float-button',
  data() {
    return {
      isHidden: true,         // 是否隐藏聊天窗口
      inputMessage: '',       // 输入框内容
      messages: [
        {
          role: 'assistant',
          content: '您好！我是足球裁判规则助手，有任何关于足球规则的问题都可以问我。',
          time: Date.now()
        }
      ],
      scrollTop: 0,
      dialogueId: null,
      isLoadingResponse: false,
      chatBodyHeight: 680,    // 默认高度
      isThinking: false,      // 是否正在思考中
      isLoggedIn: false,      // 默认设为未登录
      isTyping: false,        // 是否正在逐字输出
      typingText: '',         // 当前已经打印的文本
      fullResponseText: '',   // 完整的响应文本
      typingSpeed: 15,        // 打字速度(毫秒)
      typingIndex: 0,         // 当前打字的位置
      lastThinkingMessageIndex: -1 // 记录思考中消息的索引
    }
  },
  created() {
    // 检查用户登录状态，默认为未登录
    this.checkLoginStatus().then(() => {
      // 加载历史对话记录
      this.loadDialogue();
    });
    
    // 计算适合设备的聊天区域高度
    this.calculateChatBodyHeight();
  },
  methods: {
    // 检查用户登录状态
    async checkLoginStatus() {
        try {
          const userInfoStr = uni.getStorageSync('userInfo');
          // 使用系统统一的token获取方式
          let token = getToken();
          console.log('[AI助手] 获取到的token:', token ? '有token' : '无token');
          
          // 如果没有基本的用户信息，直接标记为未登录
          if (!userInfoStr) {
            this.isLoggedIn = false;
            console.log('未找到用户信息，用户未登录');
          return false;
          }
          
          // 解析用户信息
          let userInfo;
          try {
            userInfo = JSON.parse(userInfoStr);
          } catch (parseError) {
            console.error('解析用户信息失败', parseError);
            this.isLoggedIn = false;
          return false;
          }
          
          // 优先使用独立存储的token，这是新版token的存储方式
          if (token) {
          // 调用云对象验证token有效性
          try {
            const userService = uniCloud.importObject('user-service');
            const res = await userService.verifyToken({token: token, userId: userInfo._id});
            
            if (res && res.code === 0) {
                  this.isLoggedIn = true;
                  console.log('登录状态检查结果: 已登录');
              return true;
                } else {
                  this.isLoggedIn = false;
                  console.log('登录状态检查结果: 未登录 (token验证失败)');
              return false;
                }
          } catch (err) {
                console.error('验证token失败', err);
                this.isLoggedIn = false;
                console.log('登录状态检查结果: 未登录 (验证请求失败)');
            return false;
              }
          }
          // 向后兼容：如果没有独立存储的token，则使用userInfo中的token
          else if (userInfo && userInfo.token) {
            // 验证userInfo中的token
          try {
            const userService = uniCloud.importObject('user-service');
            const res = await userService.verifyToken({token: userInfo.token, userId: userInfo._id});
            
            if (res && res.code === 0) {
                  this.isLoggedIn = true;
                  console.log('登录状态检查结果: 已登录 (使用userInfo中的token)');
              return true;
                } else {
                  this.isLoggedIn = false;
                  console.log('登录状态检查结果: 未登录 (userInfo中的token无效)');
              return false;
                }
          } catch (err) {
                console.error('验证userInfo中的token失败', err);
                this.isLoggedIn = false;
            return false;
              }
          } else {
            this.isLoggedIn = false;
            console.log('登录状态检查结果: 未登录 (无token)');
          return false;
          }
        } catch (e) {
          console.error('检查登录状态失败', e);
          this.isLoggedIn = false;
        return false;
        }
    },
    
    // 计算聊天区域高度
    calculateChatBodyHeight() {
      try {
        const systemInfo = uni.getSystemInfoSync();
        const windowHeight = systemInfo.windowHeight;
        
        // 根据屏幕大小动态调整聊天区域高度
        if (windowHeight < 600) {
          this.chatBodyHeight = 450; 
        } else if (windowHeight < 800) {
          this.chatBodyHeight = 550;
        } else {
          this.chatBodyHeight = 650;
        }
      } catch (e) {
        console.error('获取设备信息失败', e);
      }
    },
    
    // 切换聊天窗口显示/隐藏
    async toggleAI() {
      // 检查登录状态
      await this.checkLoginStatus();
      
      this.isHidden = !this.isHidden;
      
      if (!this.isHidden) {
        // 滚动到最新消息
        setTimeout(() => {
          this.scrollToBottom();
        }, 300);
      }
    },
    
    // 滚动到底部
    scrollToBottom() {
      this.$nextTick(() => {
        setTimeout(() => {
          this.scrollTop = 100000; // 使用一个足够大的值确保滚动到底部
        }, 100);
      });
    },
    
    // 滚动触底事件
    onScrollToLower() {
      console.log('已滚动到底部');
    },
    
    // 格式化时间
    formatTime(timestamp) {
      const date = new Date(timestamp);
      return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
    },
    
    // 逐字显示文本
    startTyping(text) {
      this.isTyping = true;
      this.fullResponseText = text;
      this.typingText = '';
      this.typingIndex = 0;
      
      this.typeNextChar();
    },
    
    // 打字下一个字符
    typeNextChar() {
      if (this.typingIndex < this.fullResponseText.length) {
        this.typingText += this.fullResponseText.charAt(this.typingIndex);
        this.typingIndex++;
        
        // 滚动到底部确保用户可以看到最新内容
        this.scrollToBottom();
        
        // 设置下一个字符的延迟
        setTimeout(() => {
          this.typeNextChar();
        }, this.typingSpeed);
      } else {
        // 完成打字
        this.isTyping = false;
        // 使用完整文本替换最后一条消息
        this.messages[this.messages.length - 1].content = this.fullResponseText;
      }
    },
    
    // 发送消息
    async sendMessage() {
      if (!this.inputMessage.trim() || this.isLoadingResponse) return;
      
      // 检查登录状态
      const isLoggedIn = await this.checkLoginStatus();
      if (!isLoggedIn) {
        uni.showToast({
          title: '请先登录后再使用',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      // 添加用户消息
      this.messages.push({
        role: 'user',
        content: this.inputMessage,
        time: Date.now()
      });
      
      const question = this.inputMessage;
      this.inputMessage = '';
      
      // 滚动到底部
      this.scrollToBottom();
      
      // 显示AI正在思考
      this.isThinking = true;
      // 记住思考中消息的索引
      this.lastThinkingMessageIndex = this.messages.length;
      this.messages.push({
        role: 'assistant',
        content: '思考中',
        time: Date.now()
      });
      
      // 设置加载状态
      this.isLoadingResponse = true;
      
      // 调用AI回答接口
      this.getAIResponse(question);
    },
    
    // 获取AI回答
    async getAIResponse(question) {
      try {
        // 获取用户信息和token
        const userInfoStr = uni.getStorageSync('userInfo');
        // 使用系统统一的token获取方式
        const token = getToken();
        
        if (!userInfoStr) {
          throw new Error('用户未登录');
        }
        
        const userInfo = JSON.parse(userInfoStr);
        const userId = userInfo._id;
        
        // 调用云对象获取AI回答
        const aiService = uniCloud.importObject('ai-service');
        const result = await aiService.getAIResponse(question, userId, token, this.dialogueId);
        
        // 处理思考状态结束
        this.isThinking = false;
        
        if (result && result.code === 0) {
          // 获取AI回答
          const aiResponse = result.data.response;
          
          // 直接替换"思考中"的消息，而不是添加新消息
          if (this.lastThinkingMessageIndex !== -1) {
            // 开始逐字显示
            this.startTyping(aiResponse);
          } else {
            // 保险起见，如果索引丢失，添加新消息
            this.messages.push({
              role: 'assistant',
              content: aiResponse,
              time: Date.now()
            });
          }
          
          // 保存对话ID
          if (result.data.conversationId) {
            this.dialogueId = result.data.conversationId;
          }
        } else {
          // 处理错误
          if (this.lastThinkingMessageIndex !== -1) {
            // 直接替换思考中的消息
            this.messages[this.lastThinkingMessageIndex].content = '抱歉，我遇到了一些问题，请稍后再试。';
            this.messages[this.lastThinkingMessageIndex].time = Date.now();
          } else {
            // 移除思考中消息并添加错误消息
            this.messages.pop();
            this.messages.push({
              role: 'assistant',
              content: '抱歉，我遇到了一些问题，请稍后再试。',
              time: Date.now()
            });
          }
          
          // 显示具体错误信息到控制台
          if (result?.message) {
            console.error('AI回答错误：', result.message);
          }
        }
      } catch (error) {
        this.isThinking = false;
        console.error('获取AI回答失败', error);
        
        // 处理错误
        // 根据错误类型提供更具体的错误信息
        let errorMessage = '网络连接失败，请检查您的网络后再试。';
        
        if (error.message && error.message.includes('火山引擎')) {
          errorMessage = '与AI服务连接失败，请稍后再试。';
        } else if (error.message && error.message.includes('timeout')) {
          errorMessage = '请求超时，请稍后再试。';
        } else if (error.message && error.message.includes('Integration')) {
          errorMessage = 'AI接口配置有误，请联系管理员。';
        }
        
        if (this.lastThinkingMessageIndex !== -1) {
          // 直接替换思考中的消息
          this.messages[this.lastThinkingMessageIndex].content = errorMessage;
          this.messages[this.lastThinkingMessageIndex].time = Date.now();
        } else {
          // 移除思考中消息并添加错误消息
          this.messages.pop();
          this.messages.push({
            role: 'assistant',
            content: errorMessage,
            time: Date.now()
          });
        }
      } finally {
        // 重置加载状态
        this.isLoadingResponse = false;
        this.lastThinkingMessageIndex = -1; // 重置索引
        
        // 滚动到底部
        this.scrollToBottom();
        
        // 保存对话记录
        this.saveDialogue();
      }
    },
    
    // 加载历史对话
    async loadDialogue() {
      try {
        // 检查登录状态
        const isLoggedIn = await this.checkLoginStatus();
        if (!isLoggedIn) return;
        
        // 获取用户信息和token
        const userInfoStr = uni.getStorageSync('userInfo');
        // 使用系统统一的token获取方式
        const token = getToken();
        
        if (!userInfoStr) {
          return;
        }
        
        const userInfo = JSON.parse(userInfoStr);
        const userId = userInfo._id;
        
        // 调用云对象获取对话历史
        const aiService = uniCloud.importObject('ai-service');
        const result = await aiService.getDialogueHistory(userId, token, this.dialogueId);
        
        if (result && result.code === 0 && result.data) {
          if (result.data.length > 0) {
            // 只保留欢迎消息
            this.messages = [this.messages[0]];
            
            // 将对话历史转换为消息格式
            const historyMessages = [];
            result.data.forEach(dialogue => {
              // 添加用户消息
              historyMessages.push({
                role: 'user',
                content: dialogue.user_message,
                time: new Date(dialogue.create_time).getTime()
              });
              
              // 添加AI回复
              historyMessages.push({
                role: 'assistant',
                content: dialogue.ai_response,
                time: new Date(dialogue.create_time).getTime() + 1000 // 稍微延后一点
              });
            });
            
            // 加载历史消息（最多显示最近20条）
            const recentMessages = historyMessages.slice(-20);
            this.messages.push(...recentMessages);
          }
        }
      } catch (error) {
        console.error('加载对话历史失败', error);
      }
    },
    
    // 保存对话记录
    async saveDialogue() {
      if (!this.dialogueId && this.messages.length <= 1) {
        return; // 只有欢迎消息，不需要保存
      }
      
      // 检查登录状态
      const isLoggedIn = await this.checkLoginStatus();
      if (!isLoggedIn) return;
      
      // 注意：对话记录的保存已经在getAIResponse中处理了
      // 这里不需要额外的保存逻辑
      console.log('对话记录已自动保存');
    },
    
    // 清空对话历史
    async clearMessages() {
      // 检查登录状态
      const isLoggedIn = await this.checkLoginStatus();
      if (!isLoggedIn) {
        uni.showToast({
          title: '请先登录后再使用',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      uni.showModal({
        title: '确认清空',
        content: '确定要清空所有对话历史吗？',
        confirmText: '确定',
        cancelText: '取消',
        success: async (res) => {
          if (res.confirm) {
            // 保留欢迎消息
            this.messages = [
              {
                role: 'assistant',
                content: '您好！我是足球裁判规则助手，有任何关于足球规则的问题都可以问我。',
                time: Date.now()
              }
            ];
            
            // 清除对话ID，重新创建对话
            this.dialogueId = null;
            
            // 显示成功提示
            uni.showToast({
              title: '对话已清空',
              icon: 'success',
              duration: 1500
            });
          }
        }
      });
    },
    
    // 复制消息内容
    copyMessage(content) {
      uni.setClipboardData({
        data: content,
        success: () => {
          uni.showToast({
            title: '内容已复制',
            icon: 'success',
            duration: 1500
          });
        }
      });
    }
  }
}
</script>

<style>
.ai-float-container {
  position: fixed;
  right: 30rpx;
  bottom: 120rpx;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transition: all 0.3s ease;
}

/* 完全隐藏状态 */
.ai-float-hidden .ai-toggle-btn {
  background-color: #1BAE76;
  box-shadow: 0 4rpx 10rpx rgba(0, 127, 79, 0.2);
}

.ai-toggle-btn {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  background-color: #FF5151;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 10rpx rgba(255, 81, 81, 0.2);
  margin-top: 20rpx;
  z-index: 99999; /* 增加z-index确保按钮在最上层 */
  position: relative;
}

.toggle-icon {
  font-size: 40rpx;
  color: #FFFFFF;
}

.ai-chat-container {
  width: 680rpx;
  height: 800rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s ease;
  position: fixed; /* 改为fixed定位 */
  bottom: 160rpx; /* 调整底部距离 */
  right: 30rpx; /* 靠右对齐 */
  z-index: 9999; /* 确保在其他元素上面 */
  max-width: 90vw; /* 限制最大宽度 */
}

@media screen and (max-width: 768px) {
  .ai-chat-container {
    width: 90vw; /* 在小屏幕上使用百分比宽度 */
    right: 5vw; /* 居中显示 */
    left: 5vw;
  }
}

.ai-chat-header {
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #EEEEEE;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ai-chat-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.header-actions {
  display: flex;
  align-items: center;
}

.header-action {
  font-size: 24rpx;
  color: #666666;
  padding: 6rpx 10rpx;
  border: 1px solid #EEEEEE;
  border-radius: 6rpx;
  cursor: pointer;
  margin-left: 10rpx;
}

.header-action:active {
  background-color: #F5F5F5;
}

.ai-chat-body {
  flex: 1;
  padding: 20rpx;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.ai-chat-messages {
  display: flex;
  flex-direction: column;
  padding-bottom: 30rpx;
}

.ai-message {
  margin-bottom: 30rpx;
  max-width: 65%; /* 进一步减小宽度，确保消息完全显示 */
  padding: 15rpx 20rpx; /* 调整内边距 */
  border-radius: 10rpx;
  position: relative;
  word-wrap: break-word;
  word-break: break-all;
  box-sizing: border-box; /* 确保边框和内边距计算在宽度内 */
}

.ai-message.user {
  align-self: flex-end;
  background-color: #1BAE76;
  margin-right: 50rpx;
  border-top-right-radius: 0;
  padding-right: 16rpx; /* 右侧减少一些内边距 */
}

.ai-message.assistant {
  align-self: flex-start;
  background-color: #F2F2F2;
  margin-left: 20rpx;
  border-top-left-radius: 0;
}

.ai-message-content {
  font-size: 28rpx;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
  position: relative;
  display: inline-block;
  width: 100%; /* 确保内容不会溢出 */
  box-sizing: border-box; /* 确保边框和内边距计算在宽度内 */
}

.ai-message.user .ai-message-content {
  color: #FFFFFF;
}

.ai-message.assistant .ai-message-content {
  color: #333333;
}

.ai-message-time {
  font-size: 20rpx; /* 减小时间字体 */
  color: rgba(255, 255, 255, 0.7);
  position: absolute;
  bottom: -32rpx; /* 调整位置 */
  right: 6rpx;
  z-index: 1; /* 确保时间显示在最前面 */
}

.ai-message.user .ai-message-time {
  color: rgba(255, 255, 255, 0.8); /* 提高对比度 */
}

.ai-message.assistant .ai-message-time {
  color: #999999;
}

.ai-chat-footer {
  padding: 20rpx;
  border-top: 1rpx solid #EEEEEE;
  display: flex;
  align-items: center;
}

.ai-chat-input {
  flex: 1;
  height: 70rpx;
  background-color: #F5F5F5;
  border-radius: 35rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.ai-chat-input[disabled] {
  background-color: #EEEEEE;
  color: #999999;
}

.ai-chat-send {
  width: 120rpx;
  height: 70rpx;
  line-height: 70rpx;
  background-color: #1BAE76;
  color: #FFFFFF;
  border-radius: 35rpx;
  margin-left: 20rpx;
  font-size: 28rpx;
  padding: 0;
}

.ai-chat-send[disabled] {
  background-color: #CCCCCC;
  color: #FFFFFF;
}

/* 思考动画 */
.thinking-dots {
  display: inline-block;
  margin-left: 5rpx;
}

.dot {
  opacity: 0.8;
  animation: dot-flashing 1.5s infinite;
  animation-fill-mode: both;
}

.dot1 {
  animation-delay: 0s;
}

.dot2 {
  animation-delay: 0.5s;
}

.dot3 {
  animation-delay: 1s;
}

@keyframes dot-flashing {
  0%, 80%, 100% {
    opacity: 0.2;
  }
  40% {
    opacity: 1;
  }
}

/* 自适应样式 */
@media screen and (max-width: 500px) {
  .ai-chat-container {
    height: 750rpx;
  }
  
  .ai-message-content {
    font-size: 26rpx;
  }
}

@media screen and (max-width: 375px) {
  .ai-chat-container {
    height: 700rpx;
  }
  
  .ai-message-content {
    font-size: 26rpx;
  }
}

@media screen and (max-width: 320px) {
  .ai-chat-container {
    height: 650rpx;
  }
  
  .ai-message-content {
    font-size: 24rpx;
  }
}

@media screen and (min-width: 768px) {
  .ai-chat-container {
    width: 700rpx;
    height: 900rpx;
  }
}

/* 登录提示消息的特殊样式 */
.ai-message.login-required {
  background-color: #FFF4E5;
  border: 1px solid #FFD591;
  max-width: 90%;
}

.ai-message.login-required .ai-message-content {
  color: #FF9800;
  font-weight: bold;
}

/* 登录横幅样式简化 */
.login-banner {
  position: absolute;
  bottom: 100rpx;
  left: 0;
  right: 0;
  background-color: rgba(255, 152, 0, 0.1);
  padding: 15rpx 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #FFD591;
}

.login-banner-text {
  font-size: 28rpx;
  color: #FF9800;
  font-weight: bold;
}

.ai-chat-send-disabled {
  opacity: 0.6;
}
</style> 